<template>
  <div style="height:836px;width:100%;position: relative;z-index:0">
    <div id="container" class="map" :class="{mapclass: isall}"></div>
    <div :class="{mapbkg: isbkg}" style="height:836px;width:100%;top:0;position:absolute;z-index:2" v-if="isbkg"></div>
    <div class="mapbutton" :style="{top:btntop,right:btnright}" @click="setStyle">{{btntext}}</div>
  </div>
</template>

<script>
/* eslint-disable */
import imgs from '../assets/pic--school.png'

export default {
  name: 'tw-map',
  props: {
    zoom: {
      type: String,
      default: '11'
    },
    source: {
      type: Number
    },
    curYear: {
      type: String
    },
    areaId: {
      type: String,
      default: '131000'
    }
  },
  data () {
    return {
      isbkg: false,
      zIndex: 1,
      isall: false,
      btntop: '0px',
      btntext: '放大',
      btnright: '0px',
      allCityData: [{
        areaid: '131002',
        lnglat: [116.75994873046875, 39.302794408952365],
        name: '安次区',
        prism: null,
        num: 0
      }, {
        areaid: '131081',
        lnglat: [116.56846191406251, 38.981699613104595],
        name: '霸州市',
        prism: null,
        num: 0
      }, {
        areaid: '131028',
        lnglat: [116.91650390625, 39.92394967016644],
        name: '大厂回族自治县',
        prism: null,
        num: 0
      }, {
        areaid: '131025',
        lnglat: [116.57318115234375, 38.55406704456943],
        name: '大城县',
        prism: null,
        num: 0
      }, {
        areaid: '131022',
        lnglat: [116.28753662109375, 39.30916646551957],
        name: '固安县',
        prism: null,
        num: 0
      }, {
        areaid: '131003',
      lnglat: [116.56768798828125, 39.581235736324825],
        name: '广阳区',
        prism: null,
        num: 0
      }, {
        areaid: '131082',
        lnglat: [117.02756591796875, 39.9297471840457],
        name: '三河市',
        prism: null,
        num: 0
      }, {
        areaid: '131026',
        lnglat: [116.488037109375, 38.85668153637508],
        name: '文安县',
        prism: null,
        num: 0
      }, {
        areaid: '131024',
        lnglat: [117.037353515625, 39.70943369178247],
        name: '香河县',
        prism: null,
        num: 0
      }, {
        areaid: '131023',
        lnglat: [116.54846191406251, 39.28367475355144],
        name: '永清县',
        prism: null,
        num: 0
      }],
      xnArea: [
        {
        areaid: '131071',
        lnglat: [116.12231689453124, 38.54326051987162],
        name: '开发区',
        prism: null,
        num: 0
      }, {
        areaid: '131001',
        lnglat: [116.12657031249999, 38.67194763292809],
        name: '市辖区',
        prism: null,
        num: 0
      }],
      amap: null,
      curAreaId: '',
      mapAllData: {
        '廊坊市': {
          areaid: '131000',
          mapjson: null,
          lnglat: [],
          data: [],
          num: 0
        },
        '安次区': {
          areaid: '131002',
          mapjson: null,
          lnglat: [116.75994873046875, 39.322794408952365],
          data: [],
          num: 0
        },
        '霸州市': {
          areaid: '131081',
          mapjson: null,
          lnglat: [116.54846191406251, 39.081699613104595],
          data: [],
          num: 0
        },
        '大厂回族自治县': {
          areaid: '131028',
          mapjson: null,
          lnglat: [116.91650390625, 39.86394967016644],
          data: [],
          num: 0
        },
        '大城县': {
          areaid: '131025',
          mapjson: null,
          lnglat: [116.57318115234375, 38.65406704456943],
          data: [],
          num: 0
        },
        '固安县': {
          areaid: '131022',
          mapjson: null,
          lnglat: [116.28753662109375, 39.34916646551957],
          data: [],
          num: 0
        },
        '广阳区': {
          areaid: '131003',
          mapjson: null,
          lnglat: [116.58768798828125, 39.541235736324825],
          data: [],
          num: 0
        },
        '三河市': {
          areaid: '131082',
          mapjson: null,
          lnglat: [117.06756591796875, 40.0297471840457],
          data: [],
          num: 0
        },
        '文安县': {
          areaid: '131026',
          mapjson: null,
          lnglat: [116.488037109375, 38.90668153637508],
          data: [],
          num: 0
        },
        '香河县': {
          areaid: '131024',
          mapjson: null,
          lnglat: [117.037353515625, 39.70943369178247],
          data: [],
          num: 0
        },
        '永清县': {
          areaid: '131023',
          mapjson: null,
          lnglat: [116.54846191406251, 39.32367475355144],
          data: [],
          num: 0
        },
        '开发区': {
          areaid: '131071',
          mapjson: null,
          lnglat: [116.12231689453124, 38.54326051987162],
          data: [],
          num: 0
        },
        '市辖区': {
          areaid: '131001',
          mapjson: null,
          lnglat: [116.12657031249999, 38.67194763292809],
          data: [],
          num: 0
        }
      }
    }
  },
  watch: {
    curYear (val) {
      if (val) {
        this.getSchoolNum()
      }
    }
  },
  created () {
    window.aaa = this
    this.curAreaId = this.areaId
  },
  mounted () {
    this.getSchoolNum()
  },
  beforeDestroy () {
    let vm = this
    if (vm.amap) {
      vm.amap.destroy()
      vm.amap = null
    }
  },
  methods: {
    setStyle () {
      let vm = this
      if (vm.isall) {
        vm.zIndex = 1
        vm.isall = false
        vm.btntop = '0px'
        vm.btnright = '0px'
        vm.btntext = '放大'
        vm.$emit('showall', true)
        // vm.amap.setZoomAndCenter(9.8, [116.63635253906249, 38.89958342598271])
        // vm.amap.setZoomAndCenter(11, [116.63635253906249, 38.89958342598271])
        // this.initMap()
      } else {
        vm.zIndex = 1
        vm.isall = true
        if (vm.zoom === '11') {
          vm.btntop = '-120px'
          vm.btnright = '-1200px'
        } else {
          vm.btntop = '-120px'
          vm.btnright = '-900px'
        }
        vm.btntext = '恢复'
        vm.$emit('showall', false)
        // vm.amap.setZoomAndCenter(11, [116.63635253906249, 38.89958342598271])
      }
    },
    getSchoolNum () {
      let vm = this
      for(let key  in vm.mapAllData){
        vm.mapAllData[key].num = Math.floor((Math.random()*100)+1)
      }
      vm.initMap()
    },
    initMap () {
      let vm = this
      let zoom = parseFloat(vm.zoom)
      vm.isbkg = true
      vm.amap = new AMap.Map('container', {
        viewMode: '3D',
        mapStyle: 'amap://styles/ed3949fcc58f08e9e8b692f949c6137d',
        pitch: 55,
        features: ['bg', 'road'],
        zoom: 9.8,
        center: [116.45635253906249, 38.85958342598271],
        resizeEnable: true,
        skyColor: '#05388f'
      })
      let map = vm.amap

      let controlBar = new AMap.ControlBar({
        position: {top: '10px', left: '-40px'},
        showZoomBar: true,
        showControlButton: false
      })
      map.addControl(controlBar)

      let buildlayers = new AMap.Buildings({
        zooms: [13, 18],
        zIndex: 10,
        heightFactor: 2 // 2倍于默认高度，3D下有效
      })
      vm.amap.add(buildlayers)
        // 设置光照
      vm.amap.AmbientLight = new AMap.Lights.AmbientLight([1, 1, 1], 0.5)
      vm.amap.DirectionLight = new AMap.Lights.DirectionLight([0, 0, 1], [1, 1, 1], 1)

      let object3Dlayer = new AMap.Object3DLayer()
      vm.amap.add(object3Dlayer)
      let overlayGroups = null
      vm.amap.on("complete", function(){
        // console.log("地图加载完成！")
        vm.isbkg = false

        map.setMapStyle('amap://styles/ed3949fcc58f08e9e8b692f949c6137d')

        vm.$axios.get(`/static/weishidataview/newjson//mapdatagongshu.json`, {
          baseURL: ''
        }).then((resp) => {
          let heatmapData = ''
          if (vm.source === 3) {
            heatmapData = resp.data.heatmapData
          } else {
            heatmapData = resp.data.xuexiaodata
          }
          let schoolnum = 0
          let colorList = ['#1890ffbb', '#00e2febb', '#ffea7fbb', '#81e6b3bb', '#4c6affbb', '#7e73ffbb', '#a694ffbb', '#ffb686bb', '#fb6c84bb', '#91dcf2bb', '#11c9aabb', '#40bfffbb']
          let height = 3000
          // let prismarr = []
          vm.allCityData.forEach((item, index) =>{
            let color = colorList[index] // rgba
            if (item.name === '开发区' || item.name === '市辖区') {
              new AMap.DistrictSearch({
                subdistrict: 0,   // 返回下一级行政区
                extensions: 'all',  // 返回行政区边界坐标组等具体信息
                level: 'city'  // 查询行政级别为 市
              }).search('廊坊市', function (status, result) {
                let bounds = result.districtList[0].boundaries
                let prism = new AMap.Object3D.Prism({
                  path: bounds,
                  height: height,
                  color: color
                })
                prism.transparent = true
                vm.mapAllData[item.name].mapjson = prism
              })
            } else {
              new AMap.DistrictSearch({
                subdistrict: 0,   // 返回下一级行政区
                extensions: 'all',  // 返回行政区边界坐标组等具体信息
                level: 'city'  // 查询行政级别为 市
              }).search(item.name, function (status, result) {
                let bounds = result.districtList[0].boundaries
                vm.allCityData[index].prism = new AMap.Object3D.Prism({
                  path: bounds,
                  height: height,
                  color: color
                })
                vm.allCityData[index].prism.transparent = true
                vm.mapAllData[item.name].mapjson = vm.allCityData[index].prism
                if (vm.areaId === '131000') {
                  object3Dlayer.add(vm.allCityData[index].prism)
                } else if (vm.areaId === item.areaid) {
                  object3Dlayer.add(vm.allCityData[index].prism)
                }
              })
            }

            let text = null
            if (vm.source === 2 || vm.source === 6) {
              text = new AMap.Text({
                text: item.name + '</br>' + vm.mapAllData[item.name].num + '',
                verticalAlign: 'bottom',
                position: vm.mapAllData[item.name].lnglat,
                height: height,
                style: {
                  'background-color': 'transparent',
                  'text-align': 'center',
                  'border': 'none',
                  'color': 'white',
                  'font-size': '16px',
                  'font-weight': 600
                }
              })
            } else {
              text = new AMap.Text({
                text: item.name,
                verticalAlign: 'bottom',
                position: vm.mapAllData[item.name].lnglat,
                height: height,
                style: {
                  'background-color': 'transparent',
                  'text-align': 'center',
                  'border': 'none',
                  'color': 'white',
                  'font-size': '16px',
                  'font-weight': 600
                }
              })
            }
            text.setMap(map)

            text.setExtData(item)
            text.on('click', (ev) => {
              let aa = ev.target.getExtData()
              vm.curAreaId = aa.areaid
              vm.$emit('areaId', aa.areaid)
              vm.allCityData.forEach(item => {
                object3Dlayer.remove(item.prism)
              })
              object3Dlayer.remove(sxqprism)
              object3Dlayer.remove(kfqprism)
              object3Dlayer.remove(vm.mapAllData['市辖区'].mapjson)
              object3Dlayer.remove(vm.mapAllData['开发区'].mapjson)
              object3Dlayer.add(vm.allCityData[index].prism)
              map.setZoomAndCenter(11, aa.lnglat)
            })
          })
          // 添加学校坐标点----开始
          let spots = []
          let zoomStyleMapping2 = {
            11: 0, 12: 0, 13: 1, 14: 1, 15: 1, 16: 1, 17: 1, 18: 1, 19: 1, 20: 1
          }
          let touristSpots = resp.data.xuexiaodata
          for(let i=0; i<touristSpots.length; i+=1){
            let marker = new AMap.ElasticMarker({
              position: touristSpots[i].position,
              zooms: [14, 20],
              styles:[{
                icon:{
                  img: imgs, // touristSpots[i].smallIcon,
                  size: [16, 16],//可见区域的大小
                  ancher: [8, 16],//锚点
                  fitZoom: 14,//最合适的级别
                  scaleFactor: 2,//地图放大一级的缩放比例系数
                  maxScale: 2,//最大放大比例
                  minScale: 1//最小放大比例
                },
                label:{
                  content:touristSpots[i].name,
                  offset: [-40,0],
                  position: 'BM',
                  minZoom: 14
                }
              },{
                icon: {
                  img: imgs, // touristSpots[i].bigIcon,
                  size: touristSpots[i].size,
                  ancher: touristSpots[i].ancher,
                  fitZoom: 17.5,
                  scaleFactor: 2,
                  maxScale: 2,
                  minScale: 0.125
                },
                label:{
                  content:touristSpots[i].name,
                  offset: [-40, 0],
                  position:'BM'
                }
              }],
              data: '33333',
              zoomStyleMapping: zoomStyleMapping2
            })
            marker.setExtData(touristSpots[i])
            marker.on('click',function(e){
              let m = e.target.getExtData()
              vm.$emit('selectSchool', m)
            })
            spots.push(marker)
          }
          map.add(spots)
          // 添加学校坐标----结束

          // 添加两个虚拟区
          let sxqbounds = [
            [
              new AMap.LngLat(116.01537475585938, 38.624381089751544),
              new AMap.LngLat(116.20925903320312, 38.624381089751544),
              new AMap.LngLat(116.20925903320312, 38.73480362521081),
              new AMap.LngLat(116.01537475585938, 38.73480362521081),
              new AMap.LngLat(116.01537475585938, 38.624381089751544)
            ]
          ]
          let kfqbounds = [
            [
              new AMap.LngLat(116.01537475585938, 38.523369048060764),
              new AMap.LngLat(116.20925903320312, 38.523369048060764),
              new AMap.LngLat(116.20925903320312, 38.60506646289451),
              new AMap.LngLat(116.01537475585938, 38.60506646289451),
              new AMap.LngLat(116.01537475585938, 38.523369048060764)
            ]
          ]
          let sxqprism = new AMap.Object3D.Prism({
              path: sxqbounds,
              height: height,
              color: colorList[4]
          })
          let kfqprism = new AMap.Object3D.Prism({
              path: kfqbounds,
              height: height,
              color: colorList[4]
          })
          if (vm.areaId === '131000') {
            object3Dlayer.add(sxqprism)
            object3Dlayer.add(kfqprism)
          } else if (vm.areaId === '131001') {
            object3Dlayer.add(sxqprism)
          } else if (vm.areaId === '131071') {
            object3Dlayer.add(kfqprism)
          }

          vm.xnArea.forEach((item, index) => {
            let color = colorList[index] // rgba
            new AMap.DistrictSearch({
              subdistrict: 0,   // 返回下一级行政区
              extensions: 'all',  // 返回行政区边界坐标组等具体信息
              level: 'city'  // 查询行政级别为 市
            }).search('廊坊市', function (status, result) {
              let bounds = result.districtList[0].boundaries
              let prism = new AMap.Object3D.Prism({
                path: bounds,
                height: height,
                color: color
              })
              prism.transparent = true
              vm.mapAllData[item.name].mapjson = prism
              if (vm.areaId === '131001') {
                object3Dlayer.add(prism)
              } else if (vm.areaId === '131071') {
                object3Dlayer.add(prism)
              }
            })
            let text = null
            if (vm.source === 2 || vm.source === 6) {
              text = new AMap.Text({
                text: item.name + '</br>' + vm.mapAllData[item.name].num + '',
                verticalAlign: 'bottom',
                position: vm.mapAllData[item.name].lnglat,
                height: height,
                style: {
                  'background-color': 'transparent',
                  'text-align': 'center',
                  'border': 'none',
                  'color': 'white',
                  'font-size': '16px',
                  'font-weight': 600
                }
              })
            } else {
              text = new AMap.Text({
                text: item.name,
                verticalAlign: 'bottom',
                position: vm.mapAllData[item.name].lnglat,
                height: height,
                style: {
                  'background-color': '#00000000',
                  'text-align': 'center',
                  'border': 'none',
                  'color': 'white',
                  'font-size': '16px',
                  'font-weight': 600
                }
              })
            }
            text.setMap(map)
            text.setExtData(item)
            text.on('click', (ev) => {
              let aa = ev.target.getExtData()
              vm.curAreaId = aa.areaid
              vm.$emit('areaId', aa.areaid)
              vm.allCityData.forEach(item => {
                object3Dlayer.remove(item.prism)
              })
              object3Dlayer.remove(sxqprism)
              object3Dlayer.remove(kfqprism)
              if (aa.areaid === '131001') {
                object3Dlayer.remove(vm.mapAllData['开发区'].mapjson)
                object3Dlayer.add(vm.mapAllData['市辖区'].mapjson)
                object3Dlayer.add(sxqprism)
              } else {
                object3Dlayer.remove(vm.mapAllData['市辖区'].mapjson)
                object3Dlayer.add(kfqprism)
                object3Dlayer.add(vm.mapAllData['开发区'].mapjson)
              }
              map.setZoomAndCenter(11, aa.lnglat)
          })
          })
          // 结束添加两个虚拟区

          let heatmapOpts = {
          //3d 相关的参数
            '3d': {
              //热度转高度的曲线控制参数，可以利用左侧的控制面板获取
              heightBezier: [0.4, 0.2, 0.4, 0.8],
              //取样精度，值越小，曲面效果越精细，但同时性能消耗越大
              gridSize: 2,
              heightScale: 1
            }
          }

          //初始化heatmap对象
          let heatmap = null
          if (vm.source === 1 || vm.source === 3 || vm.source === 6) {
            heatmap = new AMap.Heatmap(map, heatmapOpts)

            heatmap.setDataSet({
              data: heatmapData,
              max: 100
            })
            heatmap.on('click', function (e) {
              map.setZoom(14)
              // console.log('fffffffffffffffff', e)
            })
          }

          // 添加事件

          map.on('zoomchange', () => {
            let zoom = map.getZoom()
            if (zoom >= 14) {
              vm.allCityData.forEach(item => {
                object3Dlayer.remove(item.prism)
              })
              object3Dlayer.remove(sxqprism)
              object3Dlayer.remove(vm.mapAllData['市辖区'].mapjson)
              object3Dlayer.remove(kfqprism)
              object3Dlayer.remove(vm.mapAllData['开发区'].mapjson)
              if (vm.source === 1 || vm.source === 3 || vm.source === 6) {
                heatmap.hide()
              }
            } else if (zoom > 9.8) {
              if (vm.curAreaId === '131001') {
                object3Dlayer.add(vm.mapAllData['市辖区'].mapjson)
              } else if (vm.curAreaId === '131071') {
                object3Dlayer.add(vm.mapAllData['开发区'].mapjson)
              }
              //  else {
              vm.allCityData.forEach(item => {
                if (vm.curAreaId === '131000') {
                  object3Dlayer.add(item.prism)
                  object3Dlayer.add(sxqprism)
                  object3Dlayer.add(kfqprism)
                } else {
                  if (item.areaid === vm.curAreaId) {
                    object3Dlayer.add(item.prism)
                  }
                }
              })
              if (vm.source === 1 || vm.source === 3 || vm.source === 6) {
                heatmap.show()
              }
              vm.$emit('selectSchool', false)
              // }
            } else {
              vm.allCityData.forEach((item, index) => {
                if (item.areaid !== '131001' || item.areaid !== '131071' || item.areaid !== vm.curAreaId) {
                  object3Dlayer.add(item.prism)
                } else {
                  object3Dlayer.remove(item.prism)
                }
              })
              object3Dlayer.add(sxqprism)
              object3Dlayer.add(kfqprism)
              object3Dlayer.remove(vm.mapAllData['市辖区'].mapjson)
              object3Dlayer.remove(vm.mapAllData['开发区'].mapjson)
              vm.curAreaId = '131000'
              if (!vm.isall) {
                vm.$emit('areaId', '131000')
              }
            }
          })
        }).catch((err) => {
          console.log(err)
        })
      })
    },
    handleTouchMove () {}
  }
}
</script>

<style>
.map {
  width: 100%;
  height: 100%;
}
.amap-marker-label{
  font-size: 24px;
  line-height: 24px;
  text-align: center;
  height: 36px;
  color: "#fff";
  border-radius: 15px;
  background-color: rgba(255,255,255,0.4);
  border: solid 2px rgba(100,255,200,0.8);
}
.mapbkg {
  background: rgba(0, 17, 64, 1);
}
.mapclass {
  width: 1920px;
  height: 1080px;
  top: -190px;
  left: -20px;
}
.mapbutton {
  position:absolute;
  font-size: 16px;
  margin: 10px;
  z-index: 1;
  padding: 5px 10px;
  border: 2px solid #0469f1;
  border-radius: 5px;
  color: #00a7fe;
  cursor: pointer;
}
.mapbutton:hover {
  color: #07ffff;
}
</style>
